<script setup lang="ts">
// 导入组件库
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 导入组件属性类型
import type{ IconProps } from './types';
import {omit} from 'lodash-es'
import { computed } from 'vue';
defineOptions({
  name:'WfIcon',
  inheritAttrs:false,
})
const props = defineProps<IconProps>()
// 过滤掉自己添加的属性后的属性集合（原生属性）
// 需要用 computed包裹，这样传过来的 props 改变也会牵扯到filterProps 的改变
const filterProps = computed(()=>{
  return omit(props,['type','color'])
})

const colorOption = computed(()=>{
  return props.color ? {color:props.color} : {}
})
</script>
<template>
  <i 
  class="wf-icon" 
  :class="{
    [`wf--icon-${type}`]:type
  }" 
  :style="colorOption" v-bind="$attrs">
    <font-awesome-icon v-bind="filterProps"  />
  </i>
</template>